<script setup>
import {ref, onMounted, watchEffect} from 'vue'
import {showImagePreview} from 'vant';
import 'vant/es/image-preview/style'
import {PERSONAL_ROUTE} from "@/router/routes/personal/personal.js";
import {useRouter} from "vue-router";
import useAccountStore from "@/store/modules/AccountStore.js";

const accountStore = useAccountStore()
const router = useRouter()

const props = defineProps({
  avatar: {type: String, default: ''},
  avatarBg: {type: String, default: ''},
  username: {type: String, default: ''},
})

const avatar = ref('')
const avatarBg = ref('')
const username = ref('')
const account = ref('')
onMounted(() => {
  account.value = accountStore.user?.account
  if (props.avatar.length <= 0) {
    avatar.value = accountStore.user?.avatar
  } else {
    avatar.value = props.avatar
  }
  if (props.avatarBg.length <= 0) {
    avatarBg.value = accountStore.user?.avatarBg
  } else {
    avatarBg.value = props.avatarBg
  }
  if (props.username.length <= 0) {
    username.value = accountStore.user?.username
  } else {
    username.value = props.username
  }
})
watchEffect(() => {
  if (props.avatar.length <= 0) {
    avatar.value = accountStore.user?.avatar
  } else {
    avatar.value = props.avatar
  }
  if (props.avatarBg.length <= 0) {
    avatarBg.value = accountStore.user?.avatarBg
  } else {
    avatarBg.value = props.avatarBg
  }
  if (props.username.length <= 0) {
    username.value = accountStore.user?.username
  } else {
    username.value = props.username
  }
})

// 图片预览
const imgPreview = (url) => {
  showImagePreview([url]);
}

const goPersonal = () => {
  router.push({name: PERSONAL_ROUTE})
}
</script>

<template>
  <div
      class="avatar-username-account relative overflow-hidden"
      :style="{backgroundImage: `url(${avatarBg})`}"
  >
    <div
        class="container p-2 pt-16 flex justify-start items-stretch"
        @click.self="imgPreview(avatarBg)"
    >
      <div
          class="avatar w-20 h-20 mr-4 rounded-2xl overflow-hidden flex-center"
          @click.stop="imgPreview(avatar)"
      >
        <img :src="avatar" alt="">
      </div>
      <div class="username-account pt-3">
        <div class="username mb-1 w-64 truncate text-gray-100 text-xl"
             @click.stop="goPersonal"
        >{{ username }}</div>
        <div class="account text-gray-300 text-sm"
             @click.stop="goPersonal"
        >账号：{{ account }}</div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.avatar-username-account {
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  overflow: hidden;

  .container {
    backdrop-filter: blur(3px) brightness(80%);
  }
}
</style>